<template>
<div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
          <el-alert
            title="注意：只能第三级分类设置相关参数"
            type="warning"
            show-icon
            :closable="false">
        </el-alert>
        <el-row>
            <el-col>
                <span style="display: block; margin-top: 15px">商品参数</span>
            </el-col>
        </el-row>
         <el-cascader
            v-model="selectCatKey"
            :options="cat_list"
            :props="cat_props"
            @change="handleChange">
        </el-cascader>

         <el-tabs v-model="activeName" @tab-click="tabHandleClick">
            <el-tab-pane label="动态参数" name="many">
                <el-button type="primary" size= "mini" :disabled="isSelected" @click="addDialogVisible=true">添加参数</el-button>
                <el-table :data="manyTabData" border stripe>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column label="参数名称" prop="attr_name">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="showEditDialog(scope.row.attr_id)" >编辑</el-button>
                            <el-button type="waning" size="mini" @click="removeItem(scope.row.attr_id)">删除</el-button>

                        </template>
                    </el-table-column>

                </el-table>
            </el-tab-pane>
            <el-tab-pane label="静态属性" name="only">
                <el-button type="primary" size="mini" :disabled="isSelected" @click="addDialogVisible=true">添加属性</el-button>
                  <el-table :data="onlyData" border stripe>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column label="属性名称" prop="attr_name">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini"  @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="removeItem(scope.row.attr_id)">删除</el-button>

                        </template>
                    </el-table-column>

                </el-table>
            </el-tab-pane>
         </el-tabs>
    </el-card>

    <!-- 添加对话框 -->
    <el-dialog :title="'添加'+ac_name" :visible.sync="addDialogVisible"  width="50%" @close="addDialogClose"> 
        <el-form :model="addRuleForm" :rules="AddRules" ref="addRuleFormRef" label-width="100px">
            <el-form-item :label="ac_name" prop="attr_name">
                <el-input v-model="addRuleForm.attr_name"></el-input>
            </el-form-item>
        </el-form> 
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addParam">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 编辑对话框 -->


    <el-dialog
    title="修改"
    :visible.sync="editdialogVisible"
    width="50%" @close="editClose"
    >
    <el-form :model="editRuleForm" :rules="editRules" ref="editRuleFormRef" label-width="100px">
  <el-form-item :label="'编辑'+ ac_name" prop="attr_name">
    <el-input v-model="editRuleForm.attr_name"></el-input>
  </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editHandle">确 定</el-button>
    </span>
    </el-dialog>
   
</div>
</template>

<script>
export default {
    data() {
        return {
            cat_list: [],
            options: [],
            selectCatKey: [],
            cat_props: {
                expandTrigger: 'hover' ,
                value: 'cat_id',
                label: 'cat_name',
                children: 'children'
            },
            // 页签默认项
            activeName: 'many',
            // 动态参数
            manyTabData: null,
            // 静态参数
            onlyData: [],

            // 对话框数据
            addRuleForm: {
                attr_name: this.activeName
            },
            // 对话框显示
            addDialogVisible: false,

           
            // 表单验证规则
            AddRules:{
                attr_name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                ]
            },
            // 编辑对话框开关
            editdialogVisible: false,
            // 编辑rule
            editRuleForm: {
                attr_name: this.activeName,
                attr_id:0
            },
            // 编辑rule规则
            editRules:{
                attr_name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ]
            }
                
            

        }
       
    },
    
    created() {
        this.get_cat_list()
    },
    methods: {
        // 级联发生改变时触发
        handleChange() {
            if (this.selectCatKey.length !== 3) {
                this.selectCatKey = []
                return
            }
            this.tabHandleClick()
        },
        async get_cat_list(){
           const {data: res}  = await this.$http.get('categories')
           if (res.meta.status !== 200) return this.$message.error('获取分类失败')
           this.cat_list = res.data
        },
        // 点击页签发生变化
        async tabHandleClick(){
            // 根据选中的id的面板获取相应的参数
            const {data: res} = await this.$http.get(`categories/${this.cateId}/attributes`, {params: { sel:this.activeName}})
            if (res.meta.status !== 200) return this.$message.error('获取失败')
            if (this.activeName === 'many'){
                this.manyTabData = res.data
            }else{
                this.onlyData = res.data
            }
        },
        // 关闭对话框
        addDialogClose(){
            this.$refs.addRuleFormRef.resetFields()
        },
        // 提交form
         addParam() {
            this.$refs.addRuleFormRef.validate( async valid => {
                if (!valid) return 
                const {data: res} = await this.$http.post(`categories/${this.cateId}/attributes`, {
                attr_name: this.addRuleForm.attr_name,
                attr_sel: this.activeName
            })
            if (res.meta.status !== 201) return this.$message.error('修改失败')
            this.$message.success('添加成功')
            this.get_cat_list()
            this.addDialogVisible = false
            })
           
        },
        // 提交editFrom
        editHandle(){
            this.$refs.editRuleFormRef.validate(async valid => {
                if (!valid) return 
                const {data: res} = await this.$http.put(`categories/${this.cateId}/attributes/${this.editRuleForm.attr_id}`,
                {attr_name:this.editRuleForm.attr_name, attr_sel: this.activeName}
                )
                if (res.meta.status !== 200) return this.$message.error('修改失败')
                this.$message.success('修改成功')
                this.tabHandleClick()
                this.editdialogVisible = false

            })
            this.editdialogVisible = false
        },
        // 显示Edit
        showEditDialog(id){
            this.editdialogVisible = true
            this.editRuleForm.attr_id = id
        },
        // 编辑对话框关闭
        editClose(){
            this.$refs.editRuleFormRef.resetFields()
        },
        // 删除
        async removeItem(id) {
            const result = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
        }).catch(err => err)
        if ( result !== 'confirm') return this.$message.info('已撤销')
        const {data: res} = await this.$http.delete(`categories/${this.cateId}/attributes/${id}`)
        if (res.meta.status !== 200) return this.$message.error('删除失败')
        this.$message.success('删除成功')
        this.tabHandleClick()
        }

    },

    computed: {
        isSelected() {
            if (this.selectCatKey.length !== 3){
                return true
            }
            return false
        },
        // 当前选中的三级分类的id
        cateId() {
            if (this.selectCatKey.length ===3)return this.selectCatKey[2]
            return null
        },
        // 共用一个对话框是名称的转变
        ac_name(){
            if(this.activeName==='many'){return '参数'}
            return '属性'
        },
        
    }
    
}
</script>
<style  scoped>
</style>